import QtQuick 2.12
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import Quick.UIComponent.Button 0.1


Page{
    id:root
    title: "Button"


    SwipeView{
        id: view
        width: parent.width
        height: 120
        currentIndex: 1
        clip: true
        Pane {
          Label {
              anchors.centerIn: parent
              text:qsTr("第一页")
          }
        }
        Pane {
            Label {
                anchors.centerIn: parent
                text:qsTr("第二页")
            }
        }
        Pane {
            Label {
                anchors.centerIn: parent
                text:qsTr("第三页")
            }
        }
        Pane {
            Label {
                anchors.centerIn: parent
                text:qsTr("第四页")
            }
        }
        Pane {
            Label {
                anchors.centerIn: parent
                text:qsTr("第五页")
            }
        }
        Pane {
            Label {
                anchors.centerIn: parent
                text:qsTr("第六页")
            }
        }
    }
    PageIndicator {
        id: indicator

        count: view.count
        currentIndex: view.currentIndex

        anchors.bottom: view.bottom
        anchors.horizontalCenter: parent.horizontalCenter
    }

    PageIndicator {
        id: control
        count: view.count
        currentIndex: view.currentIndex
        anchors.bottom: view.bottom
        anchors.bottomMargin: 20
        anchors.horizontalCenter: parent.horizontalCenter

        delegate: Rectangle {
          implicitWidth: 8
          implicitHeight: 8

          radius: width / 2
          color: "#21be2b"

          opacity: index === control.currentIndex ? 0.95 : pressed ? 0.7 : 0.45

          Behavior on opacity {
              OpacityAnimator {
                  duration: 100
              }
          }
        }
    }

    PageIndicator {
        id: baba
        count: view.count
        currentIndex: view.currentIndex
        anchors.bottom: view.bottom
        anchors.bottomMargin: -50
        anchors.horizontalCenter: parent.horizontalCenter

        delegate: LineButton {
          width: 34
          height: 34
          btnName: String(index)
          onClicked: {
            view.currentIndex = index
          }

          opacity: index === baba.currentIndex ? 0.95 : pressed ? 0.7 : 0.45

          Behavior on opacity {
              OpacityAnimator {
                  duration: 100
              }
          }
        }
    }


}
